<template>
  <div class="rsrj-tj-page">
    <el-card>
      <div slot="header">日记统计</div>
      <div class="stat-cards" style="margin-bottom: 24px;">
        <div class="stat-card">
          <div class="stat-value">{{ total }}</div>
          <div class="stat-label">日记总数</div>
        </div>
      </div>
      <div class="charts-section">
        <div class="chart-card">
          <div class="chart-title">最近七天日记数量</div>
          <div ref="lineChart" class="chart" style="height:320px;"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  name: 'RsrjTjView',
  data() {
    return {
      total: 12,
      last7Days: [2, 1, 3, 0, 2, 1, 3],
      days: [],
      lineChart: null
    }
  },
  mounted() {
    const today = new Date();
    this.days = Array.from({length: 7}, (_, i) => {
      const d = new Date(today.getTime() - (6 - i) * 24 * 60 * 60 * 1000);
      return `${d.getMonth()+1}-${d.getDate()}`;
    });
    this.initLineChart();
  },
  methods: {
    initLineChart() {
      this.lineChart = echarts.init(this.$refs.lineChart);
      this.lineChart.setOption({
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: this.days },
        yAxis: { type: 'value', minInterval: 1 },
        series: [{
          name: '日记数',
          type: 'line',
          data: this.last7Days,
          smooth: true,
          areaStyle: { color: '#e3f0ff' },
          lineStyle: { color: '#4a9eff' },
          itemStyle: { color: '#4a9eff' }
        }]
      });
    }
  }
}
</script>
<style scoped>
.rsrj-tj-page .el-card { box-shadow: 0 2px 6px rgba(74,158,255,0.04) !important; }
.stat-cards { display: flex; gap: 24px; }
.stat-card { background: #f5f7fa; border-radius: 8px; padding: 18px 32px; text-align: center; }
.stat-value { font-size: 32px; font-weight: bold; color: #4a9eff; }
.stat-label { font-size: 15px; color: #888; margin-top: 6px; }
.chart-card { background: #fff; border-radius: 8px; padding: 18px; margin-bottom: 18px; }
</style> 